<template>
	<cover-view class="box" v-if="redpackageStatus" :style="{width:winWidth+'px', height:winHeight+'px'}">
		<div @click.stop="onMask()" class="mask" :style="{width:winWidth+'px'}" @touchstart.stop='a' @touchmove.stop="b"
			@touchend.stop='c'></div>
		<cover-view class="comment-box" :style="{height:winHeight/10* (winHeight < 700 ? 9 : 8) +'px'}">
			<div class="top"></div>
			<div class="bottom">
				<image src="https://wx.2024csnl.com/static/redpackage/redpackage00.png"
					:style="{width:winWidth/10*9+'px', 'margin-left': winWidth/20+'px'}" mode="widthFix"></image>
				<div :style="{width:winWidth/10*9+'px', 'margin-left': winWidth/20+'px'}" class="redpackage-item">
					<div>
						<image src="https://wx.2024csnl.com/static/redpackage/redpackage02.png"
							:style="{width:winWidth/10*7+'px', 'margin-left': winWidth/10+'px'}" mode="widthFix">
						</image>
						<div class="item" :style="{width:winWidth/10*7+'px', 'margin-left': winWidth/10+'px'}">
							<div class="item-left" style="flex: 1;">
								<text style="font-size: 14px; color: white; font-weight: bold;text-align: center;">
									{{videoItem.redbag_info.rb_view_amount}}
								</text>
								<text v-if="videoItem.redbag_info.view_status == 0" style="font-size: 14px; color: white; text-align: center;">
									(待领取)
								</text>
								<text v-if="videoItem.redbag_info.view_status == 1" style="font-size: 14px; color: white; text-align: center;">
									(已领取)
								</text>
								<text v-if="videoItem.redbag_info.view_status == 2" style="font-size: 14px; color: white; text-align: center;">
									(已结束)
								</text>
							</div>
							<div class="item-left" style="flex: 2; text-align: center;">
								<text style="font-size: 14px; color: red; text-align: center;">观看时间福利</text>
								<text style="font-size: 12px; color: #aaa; text-align: center;">观看{{videoItem.redbag_info.rb_view_long}}秒以上</text>
							</div>
						</div>
					</div>
					<div style="margin-top: 10px;">
						<image src="https://wx.2024csnl.com/static/redpackage/redpackage02.png"
							:style="{width:winWidth/10*7+'px', 'margin-left': winWidth/10+'px'}" mode="widthFix">
						</image>
						<div class="item" :style="{width:winWidth/10*7+'px', 'margin-left': winWidth/10+'px'}">
							<div class="item-left" style="flex: 1;">
								<text style="font-size: 14px; color: white; font-weight: bold;text-align: center;">
									{{videoItem.redbag_info.rb_gz_amount}}
								</text>
								<text v-if="videoItem.redbag_info.gz_status == 0" style="font-size: 14px; color: white; text-align: center;">
									(待领取)
								</text>
								<text v-if="videoItem.redbag_info.gz_status == 1" style="font-size: 14px; color: white; text-align: center;">
									(已领取)
								</text>
								<text v-if="videoItem.redbag_info.gz_status == 2" style="font-size: 14px; color: white; text-align: center;">
									(已结束)
								</text>
							</div>
							<div class="item-left" style="flex: 2; text-align: center;">
								<text style="font-size: 14px; color: red; text-align: center;">关注福利</text>
							</div>
						</div>
					</div>
					<div style="margin-top: 10px;">
						<image src="https://wx.2024csnl.com/static/redpackage/redpackage02.png"
							:style="{width:winWidth/10*7+'px', 'margin-left': winWidth/10+'px'}" mode="widthFix">
						</image>
						<div class="item" :style="{width:winWidth/10*7+'px', 'margin-left': winWidth/10+'px'}">
							<div class="item-left" style="flex: 1;">
								<text style="font-size: 14px; color: white; font-weight: bold;text-align: center;">
									{{videoItem.redbag_info.rb_zan_amount}}
								</text>
								<text v-if="videoItem.redbag_info.zan_status == 0" style="font-size: 14px; color: white; text-align: center;">
									(待领取)
								</text>
								<text v-if="videoItem.redbag_info.zan_status == 1" style="font-size: 14px; color: white; text-align: center;">
									(已领取)
								</text>
								<text v-if="videoItem.redbag_info.zan_status == 2" style="font-size: 14px; color: white; text-align: center;">
									(已结束)
								</text>
							</div>
							<div class="item-left" style="flex: 2; text-align: center;">
								<text style="font-size: 14px; color: red; text-align: center;">点赞福利</text>
							</div>
						</div>
					</div>
					<div style="margin-top: 10px;">
						<image src="https://wx.2024csnl.com/static/redpackage/redpackage02.png"
							:style="{width:winWidth/10*7+'px', 'margin-left': winWidth/10+'px'}" mode="widthFix">
						</image>
						<div class="item" :style="{width:winWidth/10*7+'px', 'margin-left': winWidth/10+'px'}">
							<div class="item-left" style="flex: 1;">
								<text style="font-size: 14px; color: white; font-weight: bold;text-align: center;">
									{{videoItem.redbag_info.rb_sc_amount}}
								</text>
								<text v-if="videoItem.redbag_info.sc_status == 0" style="font-size: 14px; color: white; text-align: center;">
									(待领取)
								</text>
								<text v-if="videoItem.redbag_info.sc_status == 1" style="font-size: 14px; color: white; text-align: center;">
									(已领取)
								</text>
								<text v-if="videoItem.redbag_info.sc_status == 2" style="font-size: 14px; color: white; text-align: center;">
									(已结束)
								</text>
							</div>
							<div class="item-left" style="flex: 2; text-align: center;">
								<text style="font-size: 14px; color: red; text-align: center;">收藏福利</text>
							</div>
						</div>
					</div>
					<div style="margin-top: 10px;">
						<image src="https://wx.2024csnl.com/static/redpackage/redpackage02.png"
							:style="{width:winWidth/10*7+'px', 'margin-left': winWidth/10+'px'}" mode="widthFix">
						</image>
						<div class="item" :style="{width:winWidth/10*7+'px', 'margin-left': winWidth/10+'px'}">
							<div class="item-left" style="flex: 1;">
								<text style="font-size: 14px; color: white; font-weight: bold;text-align: center;">
									{{videoItem.redbag_info.rb_zf_amount}}
								</text>
								<text v-if="videoItem.redbag_info.zf_status == 0" style="font-size: 14px; color: white; text-align: center;">
									(待领取)
								</text>
								<text v-if="videoItem.redbag_info.zf_status == 1" style="font-size: 14px; color: white; text-align: center;">
									(已领取)
								</text>
								<text v-if="videoItem.redbag_info.zf_status == 2" style="font-size: 14px; color: white; text-align: center;">
									(已结束)
								</text>
							</div>
							<div class="item-left" style="flex: 2; text-align: center;">
								<text style="font-size: 14px; color: red; text-align: center;">转发福利</text>
							</div>
						</div>
					</div>
				</div>
				<image src="https://wx.2024csnl.com/static/redpackage/redpackage01.png"
					:style="{width:winWidth/10*9+'px', 'margin-left': winWidth/20+'px'}" class="bg2" mode="widthFix">
				</image>
				<image :src="faceUrl" class="logo">
				</image>
				<cover-view class="desc">
					<text style="font-size: 15px;color:white">说明：</text>
					<text style="font-size: 15px;color:white">
						{{videoItem.redbag_info.red_desc}}
					</text>
				</cover-view>
				<cover-view class="close" @click="tapClose()">
					<image @click="tapClose()" src="https://wx.2024csnl.com/static/redpackage/redpackageclose.png" style="width: 40px;"
						mode="widthFix">
					</image>
				</cover-view>
			</div>
		</cover-view>
	</cover-view>
</template>

<script>
	export default {
		props: {
			redpackageStatus: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				list: [],
				text: null,
				faceUrl: '',
				videoItem: {},
				noData: false,
				loadingShow: false,
				loadingText: '没有更多评论了',
				focusStatus: false,
				placeholder: "说点什么吧",
				winWidth: 0,
				winHeight: 0,
				commentIndex: 0,
				initStatus: false,
				videoId: null,
				keyHeight: 0,
				keyHeightMask: 0,
				showStatus: false,
				scrollToTop: 0,
				tabBar: 0
			}
		},
		created() {
			this.getSystemInfo()
		},
		methods: {
			getSystemInfo() {
				var that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.winWidth = res.windowWidth;
						that.winHeight = res.windowHeight;
					},
				})
			},
			setTabBarHeight(h) {
				this.tabBar = h
			},
			setFaceUrl(faceUrl) {
				this.faceUrl = faceUrl;
			},

			focus() {
				this.focusStatus = true
			},
			blur() {
				this.focusStatus = false
			},
			lower() {

			},
			// 上拉加载事件
			onLoading() {
				if (this.noData) return
				if (!this.initStatus) return
				this.$emit('setCommentList')
			},
			init(item) {
				this.videoItem = item;
				this.initStatus = true
				this.faceUrl = item.expert.faceUrl
			},
			changeData() {
				this.videoId = null
				this.list = []
				this.initStatus = false
				this.noData = false
			},
			setCommentData(arrlist, check) {
				if (Array.isArray(arrlist)) {
					this.list = [...this.list, ...arrlist]
				}
				if (check) {
					this.noData = true
				}
			},
			frontAddData(item) {
				this.list.unshift(item)
			},
			tapLove(item, index) {
				this.commentIndex = index
				this.$emit("tapCommentLove", item)
			},
			tapClose() {
				this.$emit('mask')
			},
			changeCommentLove() {
				this.list[this.commentIndex].isLove = !this.list[this.commentIndex].isLove
				if (this.list[this.commentIndex].isLove) {
					this.list[this.commentIndex].num++
					return
				}
				this.list[this.commentIndex].num--
			},
			onMask() {
				if (this.focusStatus) {
					this.hideKey()
					return
				}
				this.$emit('mask')
			},
			keyboardheightchange(e) {
				if (e.detail.height < 10) {
					this.hideKey()
				}
				if (e.detail.height > 300) {
					this.keyHeight = e.detail.height
					this.keyHeightMask = e.detail.height + 50
				}
			},
			a() {},
			b() {},
			c() {},
			d() {},
			e() {}
		}

	}
</script>

<style scoped>
	.bg {
		width: 100%;
	}

	.bg2 {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 10;
		z-index: 10005;
	}

	.logo {
		position: fixed;
		left: 40;
		right: 0;
		bottom: 70;
		height: 60px;
		width: 60px;
		border-radius: 100%;
		z-index: 10007;
	}
	.desc {
		position: fixed;
		right: 40;
		bottom: 70;
		height: 65px;
		width: 150px;
		color: #FFFFFF;
		z-index: 10007;
	}
	.close {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 20;
		height: 40px;
		z-index: 10006;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.redpackage-item {
		position: absolute;
		left: 0;
		right: 0;
		top: 50;
		z-index: 10004;
	}

	.redpackage-item .item {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		text-align: center;
	}

	.redpackage-item .item .item-left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.box {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 10000;
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 10001;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.mask1 {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 10004;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.mask2 {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10005;
		background-color: #FFFFFF;
	}

	.comment-box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 10002;
		flex-direction: column;
		background-color: transparent;
	}

	.iconfont {
		font-family: iconfont;
	}

	.iconfont-size-heat {
		font-size: 40rpx;
		text-align: center;
	}

	.white-heat {
		color: #eee;
	}

	.red-heat {
		color: #FF1B00;
	}

	.top {
		background-color: #000;
		opacity: 0.1;
	}

	.bottom {
		flex: 1;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.bottom-title {
		flex: 1;
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 14px;
		color: #888;
	}

	.text-top {
		padding-top: 10rpx;
	}

	.loading {
		height: 20px;
		width: 20px;
		color: #FFFFFF;
	}

	.py-1 {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.a-center {
		align-items: center;
	}

	.text-white {
		color: #ffffff;
	}

	.text-light-muted {
		color: #B2B2B2 !important;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-column {
		flex-direction: column;
	}

	.flex-row {
		flex-direction: row;
	}

	.py-2 {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.rounded-circle {
		border-radius: 100%;
	}

	.rounded {
		border-radius: 5px;
	}

	.ml-2 {
		margin-left: 20px;
	}

	.mr-1 {
		margin-right: 10px;
	}

	.mx-1 {
		margin-left: 10px;
		margin-right: 10px;
	}

	.mt-1 {
		margin-top: 10px;
	}

	.pt-3 {
		padding-top: 30px;
	}

	.px-1 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.text-muted {
		color: #6c757d;
	}

	.j-center {
		justify-content: center;
	}

	.bg-dark {
		background-color: #343a40;
	}

	.bg-primary {
		background-color: #007bff;
	}

	.input-box {
		height: 150rpx;
		position: fixed;
		left: 0;
		right: 0;
	}
</style>